<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'
  import EchartsMixins from '../echarts.mixins'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        charts: '',
        xAngleList: [],
        yList: [],
        xyList: [],
        timerList: [],
        // 监测点名称
        monitorName: '',
      }
    },
    computed: {
      options() {
        const Echarts = require('echarts')
        return {
          title: {
            text: this.monitorName,
            x: 'center',
            align: 'right'
          },
          grid: {
            left: '70px',
            right: '80px',
            bottom: '80px'
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                contentArr.push(Format(new Date(data.value[0])))
                // data.seriesName + '值：'
                contentArr.push(data.marker + '降雨强度：' + data.value[1] + 'mm/h')
              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              xAxisIndex: [0], // 确保这个 dataZoom 控制的是 X 轴
            },
            {
              // 内置的 X 轴缩放，可以用鼠标滚轮操作
              type: 'inside',
              xAxisIndex: [0], // 明确指定这个 dataZoom 控件控制哪个 X 轴
            },
          ],

          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            boundaryGap: false,
            axisLabel: { // 坐标轴标签样式设置
              showMaxLabel:true,
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              },
            }
          },
          yAxis: {
            name: '降雨强度(mm/h)',
            type: 'value'
          },

          series: [
            {
              markLine: {
                data: [
                  {
                    type: 'average',
                    lineStyle: {
                      color: 'rgb(56,94,19)',
                      width: 1
                    },
                    label: {
                      normal: {
                        padding: [-13, -20, 15, -45],
                        position: 'end',
                        formatter: function (data, index) { // 坐标轴文字展示样式处理
                          return '平均强度:' + data.value + 'mm/h'
                        },
                      }
                    },
                  },]
              },
              markPoint: {
                symbolSize: 80,
                data: [
                  {
                    type: 'max', name: 'Max', itemStyle: {
                      color: '#9d2002'
                    }
                  },
                ],
                label: {
                  position: "inside",
                  distance: 7,
                  formatter: function (data) {
                    return '最大降强度\n' + data.value + 'mm/h'
                  }
                },
              },
              name: this.monitorName,
              type: 'line',
              smooth: true,

              symbol: 'none',
              data: this.xAngleList,
              areaStyle: {
                normal: {
                  color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0.1, color: '#0600ff' // 0% 处的颜色
                    }, {
                      offset: 0.3, color: '#1c85ff' // 100% 处的颜色
                    }, {
                      offset: 1, color: '#00f2fd' // 100% 处的颜色
                    }]
                  )
                }
              },
              itemStyle: {
                normal: {
                  color: '#1c85ff',
                  lineStyle: {
                    width: 1,
                    color: '#1c85ff'
                  }
                }
              }
            }
          ],


        }
      }
    },
    methods: {
      updateEchart(data, titleName, monitorName) {
        this.monitorName = titleName
        this.xAngleList = data
        this.charts.clear()
        this.charts.setOption(this.options)
        this.charts.resize()
      },
    },
  }
</script>
